<h3 translate="offsidebar.chat.CONNECTIONS" class="text-center text-thin">Connections</h3>
<ul class="nav">
    <!-- START list title-->
    <li class="p">
        <small translate="offsidebar.chat.ONLINE" class="text-muted">ONLINE</small>
    </li>
    <!-- END list title-->
    <li>
        <!-- START User status-->
        <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-success circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="img/user/05.jpg" alt="Image" class="media-box-object img-circle thumb48"/>
         </span>
            <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Juan Sims</strong>
               <br/>
               <small class="text-muted">Designeer</small>
            </span>
         </span>
        </a>
        <!-- END User status-->
        <!-- START User status-->
        <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-success circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="img/user/06.jpg" alt="Image" class="media-box-object img-circle thumb48"/>
         </span>
            <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Maureen Jenkins</strong>
               <br/>
               <small class="text-muted">Designeer</small>
            </span>
         </span>
        </a>
        <!-- END User status-->
        <!-- START User status-->
        <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-danger circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="img/user/07.jpg" alt="Image" class="media-box-object img-circle thumb48"/>
         </span>
            <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Billie Dunn</strong>
               <br/>
               <small class="text-muted">Designeer</small>
            </span>
         </span>
        </a>
        <!-- END User status-->
        <!-- START User status-->
        <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-warning circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="img/user/08.jpg" alt="Image" class="media-box-object img-circle thumb48"/>
         </span>
            <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Tomothy Roberts</strong>
               <br/>
               <small class="text-muted">Designer</small>
            </span>
         </span>
        </a>
        <!-- END User status-->
    </li>
    <!-- START list title-->
    <li class="p">
        <small translate="offsidebar.chat.OFFLINE" class="text-muted">OFFLINE</small>
    </li>
    <!-- END list title-->
    <li>
        <!-- START User status-->
        <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="img/user/09.jpg" alt="Image" class="media-box-object img-circle thumb48"/>
         </span>
            <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Lawrence Robinson</strong>
               <br/>
               <small class="text-muted">Developer</small>
            </span>
         </span>
        </a>
        <!-- END User status-->
        <!-- START User status-->
        <a href="#" class="media-box p mt0">
         <span class="pull-right">
            <span class="circle circle-lg"></span>
         </span>
         <span class="pull-left">
            <!-- Contact avatar-->
            <img src="img/user/10.jpg" alt="Image" class="media-box-object img-circle thumb48"/>
         </span>
            <!-- Contact info-->
         <span class="media-box-body">
            <span class="media-box-heading">
               <strong>Tyrone Owens</strong>
               <br/>
               <small class="text-muted">Designer</small>
            </span>
         </span>
        </a>
        <!-- END User status-->
    </li>
    <li>
        <div class="p-lg text-center">
            <!-- Optional link to list more users-->
            <a href="#" title="See more contacts" class="btn btn-purple btn-sm">
                <strong translate="offsidebar.chat.LOAD_MORE">Load more..</strong>
            </a>
        </div>
    </li>
</ul>
<!-- Extra items-->
<div class="p">
    <p>
        <small translate="offsidebar.chat.TASK_COMPLETION" class="text-muted">Tasks completion</small>
    </p>
    <div class="progress progress-xs m0">
        <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
             class="progress-bar progress-bar-success progress-80">
            <span class="sr-only">80% Complete</span>
        </div>
    </div>
</div>
<div class="p">
    <p>
        <small translate="offsidebar.chat.QUOTA" class="text-muted">Upload quota</small>
    </p>
    <div class="progress progress-xs m0">
        <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
             class="progress-bar progress-bar-warning progress-40">
            <span class="sr-only">40% Complete</span>
        </div>
    </div>
</div>